<template>
  <navigator
    :url="`/pages/goods_detail/goods_detail?goods_id=${item.goods_id}`"
    class="composite_item"
  >
    <!-- 图片展示 -->
    <view class="goods_img">
      <!-- <image :src="item.goods_small_logo" mode="aspectFill"></image> -->
      <u-image
        width="200rpx"
        height="200rpx"
        :src="item.goods_small_logo"
      ></u-image>
    </view>
    <!-- 商品信息 -->
    <view class="goods_info">
      <view class="goods_name u-line-2">{{ item.goods_name }}</view>
      <view class="goods_price">￥{{ item.goods_price || 9999 }}</view>
    </view>
  </navigator>
</template>

<script>
export default {
    props:['item']
};
</script>

<style lang="scss">
.composite_item {
    display: flex;
    // border-top: 1rpx solid #ccc;
    padding: 10rpx 0;
    .goods_img {
      flex: 1;
      display: flex;
      align-items: center;
      justify-content: center;
    }

    .goods_info {
      flex: 2;
      display: flex;
      flex-direction: column;
      justify-content: center;
      .goods_name {
        font-size: 30rpx;
        color: #333;
        display: -webkit-box;
        overflow: hidden;
        white-space: normal !important;
        text-overflow: ellipsis;
        word-wrap: break-word;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
      }

      .goods_price {
        font-size: 30rpx;
        color: #eb4450;
      }
    }
  }
</style>